import React from 'react';
import TemperaturInput from './TemperatureInput ';

function BiolingVerdict(props){
    if(props.celsius >= 100){
        return <p>the water would boil.</p>
    }

    return <p>the water would not boil.</p>
}

function toCelsius(fahrenheit){
    return (fahrenheit - 32) * 5 / 9;
}

function toFahrenheit(celsius){
    return (celsius * 9 / 5) + 32;
}

function tryConvert(temperature,convert){
    const input = parseFloat(temperature);
    if(Number.isNaN(input)){
        return '';
    }
    const output = convert(input);
    const rounded = Math.round(output * 1000) / 1000;
    return rounded.toString();
}

export default class Calculator extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            temperature:'',
            scale:'c'
        }
    }

    handleCelsiusChange=(temperature)=>{
        this.setState({
            scale:'c',
            temperature
        });
    }

    handleFahrenheitChange=(temperature)=> {
        this.setState({scale: 'f', temperature});
      }

   

    render(){
        const scale = this.state.scale;
        const temperature = this.state.temperature;
        const celsius = scale==='f'?tryConvert(temperature,toCelsius):temperature;
        const fahrenheit = scale==='c'?tryConvert(temperature,toFahrenheit):temperature;

        return (
           <div>
               <TemperaturInput scale='c' temperature={celsius}
               onTemperatureChange={this.handleCelsiusChange}
               />
               <TemperaturInput scale='f' temperature={fahrenheit}
               onTemperatureChange={this.handleFahrenheitChange}/>
               
                <BiolingVerdict celsius={parseFloat(celsius)} />
           </div>
        );
    }
}